<style lang='scss'>
	.add-record_single-page {
		.record-form {
			td {
				padding-bottom: 12px;
				.el-date-editor {
					width: 100%;
				}
				&.space-td {
					width: 8%;
				}
				&.label {
					max-width: 100px;
			    text-overflow: ellipsis;
			    overflow: hidden;
			    white-space: nowrap;
			    &.hidden {
			    	opacity: 0.6;
			    }
				}
			}
			.submit-btn {
				width: 26%;
				direction: ltl;
			}
		}
	}
</style>
<template>
	<el-card class="add-record_single-page">
	  <div slot="header">
	    <span>添加记录</span>
	  </div>
	  <div>
	  	<table class="form-table record-form card-form" v-show="titles_on_data">
				<tbody>
					<tr>
						<td class="label"><span>工号</span></td>
  					<td><cusInput maxlength=8 :v_input.sync="id_num"></cusInput></td>
  					<td class="space-td"></td>
  					<td class="label">日期</td>
  					<td>
  						<el-date-picker
					      v-model="date"
					      type="date"
					      value-format="timestamp"
					      placeholder="选择日期">
					    </el-date-picker>
					  </td>
					</tr>
					<tr><td colspan="5"><el-alert v-if="titles_on_data&&titles_on_data.length==0" show-icon title="请先添加数据项的title" type="error" close-text="知道了"></el-alert></td></tr>
					<template v-for="(item, index) in titles_on_data" >
	  				<tr v-if="index % 2== 0">
	  					<td class="label" :class="item.status==2?'hidden':''">{{item.label}}</td>
	  					<td><cusInput :v_input.sync="form_data[item.idKey]"></cusInput></td>
	  					<td class="space-td"></td>
	  					<template v-if="titles_on_data[index+1]">
	  						<td class="label" :class="titles_on_data[index+1].status==2?'hidden':''">{{titles_on_data[index+1].label}}</td>
	  						<td><cusInput maxlength=8 :v_input.sync="form_data[titles_on_data[index+1].idKey]"></cusInput></td>
	  					</template>
	  				</tr>
	  			</template>
				</tbody>
				<tfoot>
					<tr><td colspan="5"></td></tr>
					<tr>
						<td colspan="5">
							<div style="display: flex;">
								<p class="remark-text" style="flex-grow: 1;"><i class="el-icon-warning"></i>灰色为隐藏项</p>
								<el-button type="primary" class="submit-btn" :loading="btn_submit_loading" @click="submit">添加</el-button>
							</div>
						</td>
					</tr>
				</tfoot>
			</table>
	  </div>
	</el-card>
</template>
<script>
	import cusInput from 'components/cus_input.vue';
	import { verifyMailbox } from 'assets/js/utils.js';
	export default {
		data() {
			return {
				titles_on_data: '',
				id_num: '',
				date: '',
				form_data: {},
				btn_submit_loading: false
			}
		},
		methods: {
			initForm() {
				this.form_data = {};
				this.id_num = '';
				this.date = '';
			},
			getTitlesOnData() {
				this.$axios.get('/admin/getSalaryKeyOn').then(res => {
					if(res.s == 1) {
						let res_data = res.d;
						this.titles_on_data = res_data;
					}
				})
			},
			submit() {
				let this_form_data = this.form_data, this_titles_on_data = this.titles_on_data, require_check = true, id_key='';
				for(let i_index = 0; i_index < this_titles_on_data.length; i_index++) {
					id_key = this_titles_on_data[i_index].idKey;
					if(this_form_data[id_key] == "" || this_form_data[id_key] == undefined) {
						require_check = false;
						break;
					}
				}
				if(this.id_num && this.date && require_check) {
					this.btn_submit_loading = true;
					this.$axios.post('/admin/addRecordSingle',{
						id_num: this.id_num,
						date: this.date,
						salary_data: JSON.stringify(this_form_data)
					}).then(res => {
						if(res.s == 1) {
							this.$message.success('添加成功');
							this.initForm();
						}
					}).finally(() => {
						this.btn_submit_loading = false;
					})
				}else {
					this.$message.error('所有项都是必填项');
				}
			}
		},
		created() {
			this.getTitlesOnData();
		},
		components: {
			cusInput
		}
	}
</script>